<template>
    <div class="age-structure-panel">
      <div class="age-stats">
        <div class="age-item">
          <div class="age-value">37.5</div>
          <div class="age-label">平均年龄(岁)</div>
        </div>
        <div class="age-item">
          <div class="age-value">5.9</div>
          <div class="age-label">平均司龄(年)</div>
        </div>
        <div class="age-item">
          <div class="age-value">12.65</div>
          <div class="age-label">平均工龄(年)</div>
        </div>
      </div>
      <div ref="chartDom" class="chart-area"></div>
    </div>
</template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
  import * as echarts from 'echarts/core';
  import type { EChartsOption } from 'echarts';
  import variables from '../../variables.less?inline';
  
  function getLessVariable(varName: string): string {
      const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
      return match ? match[1].trim() : '#ccc';
  }
  
  const chartDom = ref<HTMLElement | null>(null);
  const myChart = shallowRef<echarts.ECharts | null>(null);
  
  // --- Data (Replace with actual data) ---
  const ageCategories = ['25岁以下', '26-30岁', '31-35岁', '36-40岁', '41-45岁', '46-50岁', '50岁以上'];
  const ageData = [20, 45, 65, 80, 50, 30, 15]; // Example data
  // --- End Data ---
  
  const axisLineColor = getLessVariable('axis-line-color');
  const textColor = getLessVariable('text-color');
  const primaryColor = getLessVariable('primary-color');
  const secondaryColor = getLessVariable('secondary-color');
  const splitLineColor = getLessVariable('split-line-color');
  
  const option: EChartsOption = {
      tooltip: {
          trigger: 'axis', axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(3, 28, 66, 0.9)', borderColor: axisLineColor, textStyle: { color: '#fff' },
          formatter: '{b}: {c}人'
      },
      grid: {
          left: '3%', right: '4%', bottom: '12%', // Increased bottom margin
          top: '15%', containLabel: true
      },
      xAxis: {
          type: 'category', data: ageCategories,
          axisLabel: { color: textColor, fontSize: 10, interval: 0 },
          axisLine: { lineStyle: { color: axisLineColor } },
          axisTick: { alignWithLabel: true, lineStyle: { color: axisLineColor} }
      },
      yAxis: {
          type: 'value', axisLabel: { show: false }, axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: true, lineStyle: { color: splitLineColor, type: 'dashed' } }
      },
      series: [{
          name: '人数', type: 'bar', barWidth: '45%', data: ageData,
          itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: primaryColor },
                  { offset: 1, color: secondaryColor }
              ]),
              borderRadius: [3, 3, 0, 0]
          }
      }]
  };
  
  const resizeChart = () => myChart.value?.resize();
  
  onMounted(() => {
    if (chartDom.value) {
      myChart.value = echarts.init(chartDom.value);
      myChart.value.setOption(option);
      window.addEventListener('resize', resizeChart);
    }
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
  });
  
  </script>
  
  <style lang="less" scoped>
  @import '@/styles/variables.less';
  
  .age-structure-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .age-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-shrink: 0;
  }
  
  .age-item {
    text-align: center;
    flex: 1;
    padding: 0 5px; // Add padding for spacing
  }
  
  .age-value {
    font-size: 22px;
    font-weight: bold;
    color: @primary-color;
  }
  
  .age-label {
    font-size: 12px;
    color: @text-color;
    white-space: nowrap; // Prevent wrapping
  }
  
  .chart-area {
    width: 100%;
    flex-grow: 1; // Chart takes remaining space
    min-height: 120px; // Ensure minimum height
  }
  </style>